<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渲染函数</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<div id="app">
    <anchored-heading :level="1">Hello world!</anchored-heading>
    <render1></render1>
    <render2></render2>
</div>
<script>







    Vue.component('render1', {
        data(){
            return {
                items:[
                    {
                        name:'zhang',
                        age:24
                    },
                    {
                        name:'li',
                        age:33
                    }
                ]
            }
        },
        render: function (createElement) {
            if (this.items.length) {
                return createElement('ul', this.items.map(function (item) {
                    return createElement('li', item.name)
                }))
            } else {
                return createElement('p', 'No items found.')
            }

        }
    });

    Vue.component('render2', {
        props: ['value'],
        render: function (createElement) {
            var self = this;
            return createElement('input', {
                domProps: {
                    value: self.value
                },
                on: {
                    input: function (event) {
                        self.$emit('input', event.target.value)
                    }
                }
            })

        }
    });








    var getChildrenTextContent = function (children) {
        return children.map(function (node) {
            return node.children
                ? getChildrenTextContent(node.children)
                : node.text
        }).join('')
    };

    Vue.component('anchored-heading', {
        render: function (createElement) {
            // 创建 kebab-case 风格的 ID
            var headingId = getChildrenTextContent(this.$slots.default)
                .toLowerCase()
                .replace(/\W+/g, '-')
                .replace(/(^-|-$)/g, '');

            return createElement(
                'h' + this.level,
                [
                    createElement('a', {
                        attrs: {
                            name: headingId,
                            href: '#' + headingId
                        }
                    }, this.$slots.default)
                ]
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    });

    const vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            message: 'hello 感谢使用钩子函数参数'
        },
        components: {},
        myOption: "",
        mixins: [],
        // 注册局部指令
        directives: {
            myfocus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {},
        computed: {}
    })
</script>
</body>
</html>
